<template>
  <el-dialog
    :title="title"
    class="task-edit-body"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="true"
    top="20px"
    width="1250px"
    :close-on-click-modal="false">
    <div class="task-edit-header">
      <div class="edit-avatar">
        <el-avatar size="medium" :src="view.task.avatar"></el-avatar>
      </div>
      <div class="nick-name">{{view.task.user_name}}</div>
      <div class="user-id">用户ID：{{view.task.user_id}}</div>
    </div>
    <div class="subtitle">基础信息</div>
    <div class="basic-info">
      <div class="normal-explanation">标题：{{view.task.title}}</div>
      <div class="normal-explanation">时间：{{view.task.time_create | timeFilter}}</div>
      <div class="basic-info-table">
        <table border="1">
          <tr>
            <td>分类</td>
            <td>平台名称</td>
            <td>金额</td>
            <td>单价</td>
            <td>手续费</td>
            <td>数量</td>
            <td>设备条件</td>
            <td>限次</td>
            <td>提交时限</td>
            <td>审核时限</td>
            <td>结束时间</td>
          </tr>
          <tr>
            <td>{{view.task.category_name}}</td>
            <td>{{view.task.origin_name}}</td>
            <td>{{(view.task.price * view.task.num) | moneyFilter}}</td>
            <td>{{view.task.price | moneyFilter}}</td>
            <td>{{view.task.task_fee | moneyFilter}}</td>
            <td>{{view.task.num}}</td>
            <td>{{device}}</td>
            <td>{{limit}}</td>
            <td>{{view.task.push_limit}}</td>
            <td>{{view.task.verify_limit}}</td>
            <td>{{view.task.time_end | timeFilter}}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="subtitle">操作步骤</div>
    <template v-for="(item,index) in view.task.operation_step">
      <div class="task-step" :key="`a-${index}`">
        <div>
          <div class="subtitle-step" style="width: 45px">
            步骤{{index + 1}}
          </div>
        </div>
        <div class="input-content">
          <el-input placeholder="详细的步骤" :value="item.description"></el-input>
        </div>
        <div class="input-content">
          <el-input placeholder="可一键复制的内容（如：邀请码 、口令、 链接）" :value="item.copy"></el-input>
        </div>
        <div class="input-image">
          <el-image :src="image" v-for="(image, index) in item.images" :key="`b-${index}`"></el-image>
        </div>
      </div>
    </template>
    <div class="subtitle">收集截图</div>
    <template v-for="(item,index) in view.task.collect_images">
      <div class="task-step" :key="`c-${index}`">
        <div>
          <div class="subtitle-step" style="width: 45px">
            步骤{{index + 1}}
          </div>
        </div>
        <div class="input-content">
          <el-input placeholder="详细的步骤" :value="item.text"></el-input>
        </div>
        <div class="input-image">
          <el-image :src="image" v-for="(image,index) in item.images" :key="`d-${index}`"></el-image>
        </div>
      </div>
    </template>
    <div class="subtitle">收集信息</div>
    <template v-for="(item,index) in view.task.collect_information">
      <div class="task-step" :key="`e-${index}`">
        <div>
          <div class="subtitle-step" style="width: 45px">
            字段{{index + 1}}
          </div>
        </div>
        <div class="input-content">
          <el-input placeholder="编辑的内容" :value="item"></el-input>
        </div>
      </div>
    </template>
    <div class="subtitle">举报理由</div>
    <div class="task-step">
      <div>
        类型：{{TYPE_MAP[view.type]}}
      </div>
      <div class="input-content">
        <div class="report-content">
          {{view.complain_reason}}
        </div>
      </div>
    </div>
    <template v-if="isWaiting">
      <div slot="footer" style="display: flex;justify-content: center;">
        <el-button type="primary"
                   @click="refuse">拒绝
        </el-button>
        <el-button type="primary"
                   @click="pass">审核通过（暂停任务）
        </el-button>
      </div>
    </template>
    <template v-else>
      <div class="verify-body">
        <div class="verify-time">审核时间：{{view.task.time_verify | timeFilter}}</div>
        <div class="verify-time">状态：{{view.status === 1 ? '审核通过' : '审核失败'}}</div>
        <div class="verify-reason" v-if="isRefused">拒绝理由：
          <div class="reason-content">
            {{view.refuse_reason}}
          </div>
        </div>
      </div>
    </template>
    <refuse-dialog ref="refuseDialog"></refuse-dialog>
  </el-dialog>
</template>

<script>
import { fetchDetail, verify } from './api'
import refuseDialog from './refuse'

const TYPE_MAP = {
  1: '任务内容违规',
  2: '已过期，无法进行任务',
  3: '其他'
}

export default {
  name: 'verify-dialog',
  data () {
    return {
      dialogVisible: false,
      id: undefined,
      TYPE_MAP,
      view: {
        id: '',
        type: '',
        time_create: 0,
        user_id: 0,
        target_id: 0,
        task_id: 0,
        status: 0,
        time_update: 0,
        refuse_reason: '',
        complain_reason: '',
        task: {
          id: undefined,
          user_id: undefined,
          user_name: '',
          avatar: '',
          category_id: undefined,
          category_name: '',
          origin_name: '',
          title: '',
          image: '',
          description: '',
          price: '',
          task_fee: '',
          num: '',
          rest_num: '',
          device: '',
          limit_type: 1,
          push_limit: 1,
          verify_limit: 1,
          time_end: '',
          operation_step: [],
          collect_images: [],
          collect_information: [],
          verify_step: '',
          verify_column: '',
          time_create: '',
          time_update: '',
          status: 0,
          hard_level: 0,
          type: 1,
          time_verify: 0,
          refuse_reason: '这是一个拒绝的理由',
          report_reason: '这是一个举报理由'
        }
      }
    }
  },
  components: {
    refuseDialog
  },
  computed: {
    title () {
      if (this.isRefused) {
        return '详情（审核失败）'
      }
      if (this.isPassed) {
        return '详情（审核通过）'
      }
      return '审核'
    },
    device () {
      const devices = {
        all: '全部平台',
        android: '安卓',
        ios: '苹果'
      }
      return devices[this.view.task.device]
    },
    limit () {
      return this.view.task.limit_type === 1 ? '每人一次' : '每日一次'
    },
    isRefused () {
      return this.view.status === 2
    },
    isPassed () {
      return this.view.status === 1
    },
    isWaiting () {
      return this.view.status === 0
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    async open (id) {
      this.id = id
      await this.fetchView()
      this.dialogVisible = true
      return new Promise((resolve) => {
        this._resolve = resolve
      })
    },
    async fetchView () {
      const { data } = await fetchDetail({ id: this.id })
      this.view = data
    },
    async refuse () {
      const { content } = await this.$refs.refuseDialog.open()
      if (content === false) {
        return
      }
      const { id } = this
      await verify({ id }, { status: 2, refuse_reason: content })
      this.$message.success('拒绝成功')
      this.close()
    },
    async pass () {
      const { id } = this
      await verify({ id }, { status: 1 })
      this.$message.success('审核成功')
      this.close()
    },
    close () {
      this._resolve({ refresh: true })
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
  .task-edit-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    .task-edit-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: -20px;
      .nick-name,.user-id {
        margin-left: 20px;
      }
    }
    .subtitle {
      border-left: 3px solid red;
      margin: 10px 0;
      padding-left: 8px;
      border-radius: 1px;
    }
    .basic-info {
      display: flex;
      flex-direction: column;
      .normal-explanation {
        margin: 5px 0;
      }
      .basic-info-table {
        margin: 20px 0;
        table {
          border-collapse : collapse;
          width: 100%;
          text-align: center;
          tr {
            td {
              height: 35px;
            }
          }
        }
      }
    }
    .task-step {
      display: flex;
      flex-direction: column;
      .subtitle-step {
        border-bottom: 4px solid blue;
        margin-bottom: 5px;
      }
      .input-content {
        margin: 10px 0;
        width: 600px;
        .report-content {
          height: 150px;
          border: 1px solid #adadad;
          padding: 15px 10px;
        }
      }
      .input-image {
        width: 240px;
      }
      + .task-step {
        margin-top: 12px;
      }
    }
    .verify-body {
      display: flex;
      flex-direction: column;
      margin-top: 50px;
      .verify-time {
        color: red;
      }
      .verify-reason{
        margin: 5px 0;
        display: flex;
        flex-direction: row;
        .reason-content {
          padding: 15px 10px;
          width: 350px;
          height: 120px;
          border: 1px solid #adadad;
        }
      }
    }
  }
</style>
